<template>
  <div id="pay">
      <van-nav-bar
          title="付款"
          left-arrow
          :fixed=true
          :border=true
          @click-left="$router.go(-1)"
       ></van-nav-bar>
       <div class="select">
           <van-cell-group  style="margin-top: 3rem">
               <van-cell title="请重选鲜活蔬菜送达时间"   @click="showStartTime()" v-model="startTime"  is-link/>
                <van-popup 
                  v-model="showStart" 
                  position="bottom" 
                    :style="{ height: '40%' }">
                  <van-datetime-picker 
                    v-model="startTime" 
                    type="time" 
                    :min-hour="minhours"
                  @confirm="confirmStartFn()" 
                      @cancel="cancelFn()" />
                 </van-popup>
            </van-cell-group>
            <van-cell-group>
                <van-cell title-class="title" title=' ' center>
                          <template #default>
                               <van-button type="primary" @click="submit()">提交订单</van-button>
                          </template>
                </van-cell>
           </van-cell-group>
        </div>
         <!-- 路由的出口 -->
       <transition name="router-slider" mode="out-in">
            <router-view></router-view>
      </transition>
  </div>
</template>

<script>
import { DatetimePicker, NoticeBar ,Toast} from 'vant'
 import { payOrder } from './../../../../service/api/index.js'
	export default{
     name:"Pay",
     data(){
         return{
             show:false,
             startTime:'',
             showStart:false,

         }
     },
      
      mounted(){
        //console.log(this.$route.params.oid);
      },

      computed:{
          
           minhours(){
             return  (new Date()).getHours()+1;
           }
     },
     methods:{
    
            showStartTime() {
                this.showStart = true;
            },
           confirmStartFn() { // 确定按钮
                       // console.log(this.startTime);
              this.startValue = this.startTime;
              this.showStart = false;
            },
            cancelFn(){
              this.showStart = false;
          },

            async submit(){
                //付款操作
                 let result = await payOrder(this.$route.params.oid,this.startTime);
                   console.log(result);
                  if (result.status==='200') {
                        //付款成功提示
                          Toast.success('支付成功');
                        //跳转到支付成功页面
                          this.$router.push({
                            name:'paysuccess'
                      })
                  }

            }
     }

	}
</script>


<style lang="less" scoped>
     #pay{
     	position:fixed;
     	top:0;
     	left:0;
     	bottom:0;
     	right:0;
     	background-color:#f5f5f5;
     	z-index:200;
      overflow-y: scroll;

     }

     .select{
     	margin-top:3.2rem;
    	width:100%;

     }

    .router-slider-enter-active,.router-slider-leave-active{
      transition:all 0.3s;
    }

    .router-slider-enter,.router-slider-leave-active{
      transform:translate3d(2rem,0,0);
      opacity:0;
    }
</style>